<template>
  <div class="box">
    <div class="nav">
      <div class="left"><i class="el-icon-user-solid"></i></div>
      <div class="right">
        <p>用户数量</p>
        <p class="bl">
          <vue-count-to
            :start-val="0"
            :end-val="datading.userTotal"
            :duration="3000"
            :autoplay="true"
          ></vue-count-to>
        </p>
      </div>
    </div>
    <div class="nav">
      <div class="left"><i class="el-icon-s-comment ap"></i></div>
      <div class="right">
        <p>商品数量</p>
        <p class="bl">
          <vue-count-to
            :start-val="0"
            :end-val="datading.goodsTotal"
            :duration="3000"
            :autoplay="true"
          ></vue-count-to></p>
      </div>
    </div>
    <div class="nav">
      <div class="left"><i class="el-icon-s-comment as"></i></div>
      <div class="right">
        <p>货品数量</p>
        <p class="bl">
          <vue-count-to
            :start-val="0"
            :end-val="datading.productTotal"
            :duration="3000"
            :autoplay="true"
          ></vue-count-to></p>
      </div>
    </div>
    <div class="nav">
      <div class="left"><i class="el-icon-s-goods"></i></div>
      <div class="right">
        <p>订单数量</p>
        <p class="bl">
          <vue-count-to
            :start-val="0"
            :end-val="datading.orderTotal"
            :duration="3000"
            :autoplay="true"
          ></vue-count-to></p>
      </div>
    </div>
  </div>
</template>

<script>
import VueCountTo from "vue-count-to";
import { getList } from "@/api/indexapi/index";
export default {
  components: {
    VueCountTo,
  },
  data() {
    return {
      datading: {},
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    getdata() {
      getList().then((res) => {
        this.datading = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 200px;
  background-color: #eff1f4;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .nav {
    height: 100px;
    width: 100%;
    background-color: #fff;
    margin: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .left {
      width: 100%;
      height: 100px;
      text-align: center;
      padding-top: 10px;
      i {
        font-size: 80px;
        border-radius: 5px;
      }
      .el-icon-user-solid {
        color: #5dc9c6;
      }
      .el-icon-user-solid:hover {
        color: #ffffff;
        background-color: #5dc9c6;
      }
      .ap {
        color: #50a3f8;
      }
      .ap:hover {
        color: #ffffff;
        background-color: #50a3f8;
      }
      .as {
        color: #e9536d;
      }
      .as:hover {
        color: #ffffff;
        background-color: #e9536d;
      }
      .el-icon-s-goods {
        color: #50ba9e;
      }
      .el-icon-s-goods:hover {
        color: #ffffff;
        background-color: #50ba9e;
      }
    }
    .right {
      width: 100%;
      height: 100px;
      text-align: right;
      p {
        width: 70px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        text-align: left;
        font-weight: 700;
        margin-left: 30px;
      }
      .bl {
        color: rgba(0, 0, 0, 0.6);
        font-size: 18px;
      }
    }
  }
}
</style>